<% layout('/layout/default.html', {title: '用户选择', libs: ['layui']}){ %>
<div class="main-content">
	<div class="container-fluid">
		<form id="searchForm" action="${ctx}/sys/user/listData" method="post" class="form-inline " >
			<div class="form-group">
				<label class="control-label">账号：</label>
				<div class="control-inline">
					<input name="loginName" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">昵称：</label>
				<div class="control-inline">
					<input name="name" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">邮箱：</label>
				<div class="control-inline">
					<input name="email" maxlength="300" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">手机：</label>
				<div class="control-inline">
					<input name="mobile" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">电话：</label>
				<div class="control-inline">
					<input name="phone" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-success btn-sm">查询</button>
				<button type="reset" class="btn btn-default btn-sm">重置</button>
			</div>
		</form>
		<div class="row">
			<div class="col-md-9 pr10">
				<table id="btGrid" lay-filter="btGrid"></table>
			</div>
			<div class="col-md-3 pl0">
				<div id="selectData" class="tags-input"></div>
			</div>
		</div>
	</div>
</div>
<% } %>
<script>
var selectData = JSON.parse(js.decodeURI('${selectData}')), selectNum = 0;
$('#btGrid').BTGrid({
	searchForm: $("#searchForm"),
	columnModel: [
		{type:'checkbox'},
		{title:'ID', field:'id', hide:true, templet: function (row) {
				return '<div id="'+row.id+'"></div>';
		}},
		{title:'登录账号', field:'loginName'},
		{title:'用户昵称', field:'name'},
		{title:'电子邮箱', field:'email'},
		{title:'手机号码', field:'mobile'},
		{title:'办公电话', field:'phone'},
		{title:'更新时间', field:'updateDate', templet: function (row) {
			if (row.updateDate){   // data不为空进行转换
				return (new Date(row.updateDate)).Format("yyyy-MM-dd hh:mm:ss");
			} else {
				return ''; //data为空时不转换
			}
		}},
		<% if(isBlank(role.userType)){ %>
			{title:'类型', field:'userType', templet: function(row){
				return js.transDictLabel(${@DictUtils.getDictListJson('sys_user_type')}, row.userType, '未知');
			}},
		<% } %>
	],
});
function initSelectTag(){
	selectNum = 0;
	var html = [];
	$.each(selectData, function(key, value){
		selectNum ++;
		html.push('<span class="tag" id="'+key+'_tags-input"><span>'+value.name+' </span>'
			+ '<a href="#" onclick="removeSelectTag(\''+key+'\');" title="取消选择">x</a></span>');
	});
	html.unshift('<div class="title">当前已选择<span id="selectNum">'+selectNum+'</span>项：</div>');
	$('#selectData').empty().append(html.join(''));
}
function removeSelectTag(key){
	delete selectData[key];
	var tr = $('#'+key).parents('tr')[0];
	$(tr).find("td div.laytable-cell-checkbox div.layui-form-checkbox I").click();
	//$('#selectNum').html(selectNum--);
	$('#'+key+'_tags-input').remove();
}
function getSelectData(){
	return selectData;
}
layui.use('table', function(){
	var table1 = layui.table;
	table1.on('checkbox(btGrid)', function(obj){
		console.log(obj.checked); //当前是否选中状态
		console.log(obj.data); //选中行的相关数据
		console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
		if (${checkbox == 'true'}){
			if(obj.type == 'one'){
				var data = obj.data;
				if(obj.checked){
					selectData[data.id] = data;
				}else{
					delete selectData[data.id];
				}
			}else{
				var checkData = table.checkStatus('btGrid').data;
				if(checkData.length>0){
					for (var i=0; i<checkData.length; i++){
						selectData[checkData[i].id] = checkData[i];
					}
				}else{
					selectData = {};
				}
			}
		}
		initSelectTag();
	});
});
</script>
